<template>
  <el-dialog
    top="30px"
    width="900px"
    append-to-body
    title="编辑用电信息"
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <table class="table table-bordered table-sm bg-white table-vertical-middle text-center">
      <colgroup>
        <col width="12%" />
        <col width="20%" />
        <col width="12%" />
        <col width="22%" />
        <col width="14%" />
        <col width="20%" />
      </colgroup>
      <tr>
        <td>电表户号</td>
        <td class="report-input-td">
          <el-input v-model="eleInfo.ele_no" placeholder="电表户号"></el-input>
        </td>
        <td>开户电话</td>
        <td class="report-input-td">
          <el-input v-model="eleInfo.mobile_no" placeholder="开户电话"></el-input>
        </td>
        <td>开户户名</td>
        <td class="report-input-td">
          <el-input v-model="eleInfo.account_no" placeholder="电表户号"></el-input>
        </td>
      </tr>
      <tr>
        <td>备注</td>
        <td colspan="5" class="report-input-td">
          <el-input
            type="textarea"
            v-model="hotel.remark_ele"
            placeholder="备注"
            :rows="3"
          ></el-input>
        </td>
      </tr>
    </table>
    <div class="text-center mt-5">
      <el-button type="primary" class="btn-long" :loading="saveLoading" @click="handleConfirm">
        提交
      </el-button>
      <el-button class="btn-long" :loading="saveLoading" @click="beforeClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { checkPhoneNumber } from '@/common/plugins/validator'
export default {
  components: {},
  props: {
    visible: Boolean,
    formData: { type: Object, default: () => ({}) },
    hotelData: { type: Object, default: () => {} },
  },
  data() {
    return {
      eleInfo: {},
      hotel: {},
      hotelTable: 'credit_industrial_hotel_invest',
      eleTable: 'credit_industrial_ele',
      saveLoading: false,
    }
  },
  computed: {},
  watch: {
    formData: {
      handler: function () {
        this.eleInfo = { ...this.formData }
      },
      immediate: true,
      deep: true,
    },
    hotelData: {
      handler: function () {
        this.hotel = { ...this.hotelData }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    handleConfirm() {
      if (!this.eleInfo.id) {
        return
      }
      if (!checkPhoneNumber(this.eleInfo.mobile_no)) {
        return this.$message.warning('电话号码格式错误！')
      }
      this.saveLoading = true
      Object.keys(this.eleInfo).forEach(key => {
        if (!this.eleInfo[key]) {
          this.eleInfo[key] = null
        }
      })
      Promise.all([
        this.$api.updateData(this.$serviceName, this.eleTable, this.eleInfo.id, this.eleInfo),
        this.$api.updateData(this.$serviceName, this.hotelTable, this.hotel.id, this.hotel),
      ])
        .then(() => {
          this.$message.success('保存成功')
          this.handlerSuccess()
          this.beforeClose()
        })
        .catch(err => {
          this.$message.error(err?.data?.error_description || '保存失败，请重试！')
        })
        .finally(() => {
          this.saveLoading = false
        })
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
    handlerSuccess() {
      this.$emit('success', true)
      this.$emit('getRemark', true)
    },
  },
}
</script>

<style lang="scss" scoped>
.report-input-td {
  background-color: #ffffee;
}
</style>
